import { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Input, Modal, Form } from 'antd';

class RefundModal extends Component {
  handleSubmit = () => {
    const { onOk } = this.props;

    this.props.form.validateFields((err, values) => {
      if (err) {
        return;
      }
      onOk(values);
    });
  };

  render() {
    const { loading, onCancel, tradeNo, form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    };

    return (
      <Modal
        loading={loading}
        title={`申请退款(${tradeNo})`}
        visible={true}
        onOk={this.handleSubmit}
        onCancel={onCancel}>
        <Form>
          <Form.Item {...formItemLayout} label="备注">
            {getFieldDecorator('remark', {
              rules: [
                {
                  required: true,
                  message: '退款备注是必填项',
                },
              ],
            })(
              <Input.TextArea
                placeholder="请填写退款备注"
                autosize={{
                  minRows: 4,
                  maxRows: 6,
                }}
              />
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

if (process.env.UMI_ENV !== 'prod') {
  RefundModal.propTypes = {
    onOk: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    form: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    tradeNo: PropTypes.string.isRequired,
  };
}

RefundModal.defaultProps = {
  form: {},
  dispatch: () => {},
  onCancel: () => {},
  onOk: () => {},
  loading: false,
  tradeNo: '',
};

function mapStateToProps({ loading }, ownProps) {
  const { tradeNo } = ownProps;
  return {
    tradeNo,
    loading: loading.effects['orders/refund'],
  };
}

export default connect(mapStateToProps)(Form.create()(RefundModal));
